<script setup lang="ts">
import i18n from '../../common/i18n/index.ts';
import { ref, shallowRef } from 'vue';
import { smlService } from '../../common/api.ts';
import { PreferenceLog } from '../../common/types';
import LogVue from './Log.vue';
import CollectionEventVue from './CollectionEvent.vue';
import VariableVue from "./Variable.vue";
import MappingVue from "./Mapping.vue";
import { ElMessage } from 'element-plus';

const emits = defineEmits(['close']);
let globalId = -1;
const isOpen = ref(false);
const activeTab = ref('log');
const uiCollectionEvent = shallowRef();
const uiVariable = shallowRef();
const uiMapping = shallowRef();
const log = ref<PreferenceLog>({
    dir: '',
    fileMaxSize: 0,
    messageMaxSize: 2000,
    outputMaxSize: 2000,
    isWriteSecs1: false,
});

const load = (globalIdArg: number) => {
    globalId = globalIdArg;
    smlService.getPreference(globalId).then(res => {
        log.value.dir = res.data.log.dir;
        log.value.fileMaxSize = res.data.log.fileMaxSize;
        log.value.messageMaxSize = res.data.log.messageMaxSize;
        log.value.outputMaxSize = res.data.log.outputMaxSize;
        log.value.isWriteSecs1 = res.data.log.isWriteSecs1;
        uiCollectionEvent.value.load(res.data.collectionEvent);
        uiVariable.value.load(res.data.variable);
        uiMapping.value.load(res.data.mappings);
        isOpen.value = res.isOpen;
    });
}

const save = (flag: any) => {
    const toSaveData = {
        log: log.value,
        collectionEvent: uiCollectionEvent.value.getData(),
        variable: uiVariable.value.getData(),
        mappings: uiMapping.value.getData()
    };
    smlService.setPreference(globalId, toSaveData)
        .then(_ => { })
        .catch(err => {
            ElMessage.error({ message: err });
        });
    if (!flag) {
        emits('close', false, toSaveData);
    }
    return toSaveData;
}

const saveWithClose = () => {
    const toSaveData = save(1);
    emits('close', true, toSaveData);
}

defineExpose({ load });

</script>
<template>
    <el-container>
        <el-main class="no-padding">
            <el-tabs v-model="activeTab" type="card" class="app-fit-tab">
                <el-tab-pane label="Log" name="log">
                    <LogVue :data="log" :is-open="isOpen"></LogVue>
                </el-tab-pane>
                <el-tab-pane label="Collection Event" name="collectionEvent">
                    <CollectionEventVue ref="uiCollectionEvent"></CollectionEventVue>
                </el-tab-pane>
                <el-tab-pane label="Variable" name="variable">
                    <VariableVue ref="uiVariable"></VariableVue>
                </el-tab-pane>
                <el-tab-pane label="Mapping" name="mapping">
                    <MappingVue ref="uiMapping"></MappingVue>
                </el-tab-pane>
                <el-tab-pane label="Parameter" name="parameter">

                </el-tab-pane>
            </el-tabs>
        </el-main>
        <el-footer height="34px"
            style="background-color: var(--color-toolbar-1);display: flex;justify-content: flex-end;align-items:center">
            <div style="float: right;">
                <el-button type="primary" @click="save(0)">{{ i18n.global.t('save') }}</el-button>
                <el-button type="warning" @click="saveWithClose">{{ i18n.global.t('saveWithClose') }}</el-button>
                <el-button @click="emits('close', true)">{{ i18n.global.t('cancel') }}</el-button>
            </div>
        </el-footer>
    </el-container>
</template>